<template>
  <AcceptHandleHeadComponent
    ref="acceptHandleHeadRef"
    :ucolumns="ucolumns"
    :type="LableTitle.workWarningList"
    :needMoreQuery="true"
    :showCaseNoQuery="false"
    @myEvent="myEvent"
    @onSearch="search"
    @onReset="reQuery"
  >
    <div slot="headLeft">
      <a-form-item style="display: flex; margin-bottom: 0px">
        <a-input v-model="queryParam.f_name" placeholder="请输入姓名" allowClear style="height: 40px" />
      </a-form-item>
    </div>

    <!-- 其他查询条件 -->
    <div slot="more">
      <a-form layout="inline" class="accept_more_operate_moreForm">
        <a-collapse v-model="collapseKey" class="accept_more_operate_moreForm_collapse">
          <a-collapse-panel :show-arrow="false" disabled key="1" style="font-weight: bold">
            <div slot="header" class="accept_more_operate_moreForm_collapse_head">
              <a-row :gutter="48" style="width: 100%">
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="身份证号：">
                    <a-input v-model="queryParam.f_cardno" placeholder="请输入身份证号" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="罪名：">
                    <a-input v-model="queryParam.f_crime" placeholder="请输入罪名" allowClear />
                  </a-form-item>
                </a-col>
                <a-col @click.stop="() => {}" :md="8" :sm="24">
                  <a-form-item label="处置单位">
                    <WorkDeptSelect
                      style="width: 200px !important; font-weight: normal"
                      ref="workDeptSelectRef"
                      @f_deptTreechange="s_deptTreechange"
                      :departid="this.currentDept.parentid"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="48" style="width: 100%; margin-top: 20px">
                <a-col @click.stop="() => {}" :md="12" :sm="24">
                  <a-form-item label="预警时间">
                    <a-date-picker
                      v-model="queryParam.f_rectime"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="开始日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                    ~
                    <a-date-picker
                      v-model="queryParam.f_rectime_01"
                      :style="{ width: 'calc(50% - 12px)' }"
                      placeholder="结束日期"
                      format="YYYY-MM-DD"
                      allowClear
                      @change="subtimeListen()"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </div>
          </a-collapse-panel>
        </a-collapse>
      </a-form>
    </div>

    <!-- 表格数据 -->
    <template slot="content">
      <a-table
        :scroll="scroll"
        :columns="ucolumns"
        :data-source="listData"
        :pagination="upagination"
        :loading="loading"
        rowKey="id"
        @change="tableChange"
        size="middle"
        :bordered="ubordered"
      >
        <span slot="serial" slot-scope="text, record, index">
          {{ (upagination.current - 1) * upagination.pageSize + parseInt(index) + 1 }}
        </span>

        <div slot="typeSlot" slot-scope="type">
          {{ type in Tp_crc_warn ? Tp_crc_warn[type].name : '未知' }}
        </div>
        <div slot="crimeSlot" slot-scope="crime">
          {{ crime }}
        </div>

        <template slot="statusSlot" slot-scope="status">
          {{ status in St_work ? St_work[status].name : '未知' }}
        </template>

        <div slot="addrSlot" slot-scope="addr" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ addr }}</span>
            </template>
            {{ addr }}
          </a-tooltip>
        </div>

        <div slot="deptnameSlot" slot-scope="deptname" class="beyond_hiding" style="width: 100%">
          <a-tooltip placement="topLeft">
            <template slot="title">
              <span>{{ deptname }}</span>
            </template>
            {{ deptname }}
          </a-tooltip>
        </div>

        <span slot="operation" slot-scope="text, record">
          <template>
            <a href="javascript:;" @click="view(record)">详情</a>
            <a-divider type="vertical" />
            <a-dropdown>
              <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
              <a-menu slot="overlay">
                <a-menu-item>
                  <a href="javascript:;" @click="workView(record)">记录</a>
                </a-menu-item>
                <a-menu-item>
                  <a href="javascript:;" @click="handle(record)">督办</a>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </span>
      </a-table>

      <!-- 指派处置人树 -->
      <a-modal v-model="isModel" title="督办任务" destroyOnClose @ok="saveCre_work_sup()">
        <a-textarea v-model="Cre_work_sup.remark" placeholder="请输入督办意见" style="height: 100px" />
      </a-modal>

      <!-- 处置记录 -->
      <a-drawer
        width="40%"
        :visible="editVisible"
        :body-style="{ paddingBottom: '80px' }"
        @close="editVisible = false"
        destroyOnClose
      >
        <template slot="title">
          <span>处置记录</span>

          <a-tag v-if="worktype" color="orange" style="margin-left: 8px">
            {{ Tp_crc_work[worktype].name }}
          </a-tag>
        </template>
        <WorkToDoEdit ref="workToDoEditRef" @close="editVisible = false" :workid="workid" :isEdit="false" />
      </a-drawer>
    </template>
  </AcceptHandleHeadComponent>
</template>

<script>
import { queryList } from '@/api/correction/cre_warning.js'
import { Tp_crc_warn } from '@/enumeration/correction/Tp_crc_warn.js'
import { Tp_crc_workValue, Tp_crc_work } from '@/enumeration/correction/Tp_crc_work.js'
import { St_work, St_workValue } from '@/enumeration/St_work.js'
import { saveCre_work_sup } from '@/api/correction/cre_work_sup.js'
import storage from 'store'
import { APP_USER, APP_DEPT } from '@/store/mutation-types.js'
import { nanoid } from 'nanoid'
import { Decrypt } from '@/enumeration/SM.js'

import AcceptHandleHeadComponent from '@/views/accept/component/AcceptHandleHeadComponent.vue'
import { LableTitle } from '@/enumeration/LableTitle.js'
const ucolumns = [
  {
    title: '序号',
    width: 100,
    key: 'index',
    align: 'center',
    fixed: 'left',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '姓名',
    dataIndex: 'pername',
    key: 'pername',
    align: 'center',
    width: 120
  },
  {
    title: '预警类型',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'typeSlot' }
  },
  {
    title: '罪名',
    dataIndex: 'crime',
    key: 'crime',
    align: 'center',
    width: 120,
    scopedSlots: { customRender: 'crimeSlot' }
  },
  {
    title: '处置人',
    dataIndex: 'username',
    key: 'username',
    align: 'center',
    width: 120
  },
  {
    title: '处置单位',
    dataIndex: 'deptname',
    key: 'deptname',
    align: 'center',
    width: 200,
    scopedSlots: { customRender: 'deptnameSlot' }
  },
  {
    title: '预警时间',
    dataIndex: 'rectime',
    key: 'rectime',
    align: 'center',
    width: 180
  },
  {
    title: '地点',
    dataIndex: 'addr',
    key: 'addr',
    align: 'left',
    width: 350,
    scopedSlots: { customRender: 'addrSlot' }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    align: 'center',
    width: 100,
    scopedSlots: { customRender: 'statusSlot' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key: 'action',
    width: 180,
    align: 'center',
    fixed: 'right',
    scopedSlots: { customRender: 'operation' }
  }
]
export default {
  data () {
    return {
      Tp_crc_work: Tp_crc_work, // 社矫预警处置类型
      worktype: undefined, // 处置类型
      workid: undefined, // 工作记录id
      editVisible: false, // 处置记录
      St_work: St_work, // 社矫预警处置状态
      Cre_work_sup: {
        remark: undefined, // 督办意见
        warnid: undefined, // 预警id
        workid: undefined // 督办的任务id
      }, // 督办任务对象
      isModel: false, // 处置人树模态框
      Tp_crc_warn: Tp_crc_warn, // 预警类型枚举
      collapseKey: [], // 折叠面板key
      ucolumns: ucolumns,
      queryParam: {
        f_name: undefined, // 姓名
        f_status: undefined, // 处置状态
        f_crime: undefined, // 罪名
        f_deptid: undefined, // 处置单位
        f_rectime: undefined, // 预警开始日期
        f_rectime_01: undefined, // 预警开始结束日期
        pageNumber: 1,
        pageSize: 20
      },
      listData: [],
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共${total}条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      loading: false,
      ubordered: true, // 表格边框是否显示
      currentUser: storage.get(APP_USER), // 登录人信息
      currentDept: storage.get(APP_DEPT), // 登录人部门

      LableTitle: LableTitle,
      header: undefined,
      tableCountKey: 0,
      scroll: { x: 1000, y: 420 }
    }
  },
  created () {
    console.log('this.$route.query.queryParam.queryList', this.$route.query.queryParam)
    let routeParam
    try {
      routeParam = JSON.parse(JSON.stringify(this.$route.query.queryParam))
      this.queryParam = { ...this.queryParam, ...this.$route.query.queryParam }
    } catch {
      console.log('路由传参非json格式')
    }

    // console.log('登录人部门', this.currentDept)
    this.queryList()
  },
  methods: {
    myEvent (e) {
      if (e) {
        this.scroll.y = this.scroll.y + e
      } else {
        this.scroll.y = 420
      }
    },
    // 搜索
    search () {
      this.queryParam.pageNumber = 1
      this.queryList()
    },
    // 查看工作记录
    workView (record) {
      if (!record.workid) {
        this.$message.error('未指定处置任务')
        return
      }
      this.$router.push({
        path: `/WorkWarningDetail/${record.workid}/3`,
        query: {
          id: record.id
        }
      })
    },
    // 保存督办意见
    async saveCre_work_sup () {
      console.log('Cre_work_sup', this.Cre_work_sup)
      if (!this.Cre_work_sup.remark) {
        this.$message.warning('请填写督办意见')
        return
      }
      this.Cre_work_sup.id = new Date().getTime() + nanoid()
      this.Cre_work_sup.createuserid = this.currentUser.userId
      this.Cre_work_sup.createusername = this.currentUser.fullname
      this.loading = true
      const { code } = await saveCre_work_sup(this.Cre_work_sup).finally(() => {
        this.loading = false
      })
      if (code == 0) {
        this.$message.success('操作成功')
        this.Cre_work_sup.remark = undefined
        this.isModel = false
      }
    },
    // 处置单位搜索回显
    s_deptTreechange (value) {
      this.queryParam.f_deptid = value
    },
    // 处理操作
    handle (record) {
      if (!record.workid) {
        this.$message.error('该任务暂无处置人')
        return
      }
      this.Cre_work_sup.warnid = record.id
      this.Cre_work_sup.workid = record.workid
      this.isModel = true
    },
    // 查看操作
    view (record) {
      this.$router.push({
        path: `/WorkWarningView/${record.id}`,
        query: {
          url: `/WorkWarningList`,
          queryParam: this.queryParam
        },
      })
    },
    // 查询列表数据
    async queryList () {
      const queryParam = this.getCpQueryParam()
      this.loading = true
      queryParam.f_status = [St_workValue.UNDO, St_workValue.DOING]
      const { data } = await queryList(queryParam).finally(() => {
        this.loading = false
      })
      this.listData = data.records || []
      this.listData.forEach(item => {
        item.pername = Decrypt(item.pername)
        item.describe = Decrypt(item.describe)
      })
      this.upagination.total = data.total
      this.upagination.current = data.current
      this.upagination.pageSize = data.size
    },
    // 接收时间监听判断开始结束日期是否合理
    subtimeListen () {
      if (
        this.queryParam.f_rectime > this.queryParam.f_rectime_01 &&
        this.queryParam.f_rectime &&
        this.queryParam.f_rectime_01
      ) {
        this.queryParam.f_rectime = undefined
      }
    },
    /**
     * 重置查询条件并查询数据
     */
    reQuery () {
      this.queryParam = {
        pageNumber: 1,
        pageSize: 20
      }
      // 重置处置单位查询
      this.$refs.workDeptSelectRef.f_setValue(null)
      this.queryList()
    },
    // 复制查询对象
    getCpQueryParam () {
      // 时间转换
      const cpQueryParam = JSON.parse(JSON.stringify(this.queryParam))
      if (this.queryParam.f_rectime?.format) {
        cpQueryParam.f_rectime = this.queryParam.f_rectime.format('YYYY-MM-DD') + ' 00:00:00'
      }
      if (this.queryParam.f_rectime_01?.format) {
        cpQueryParam.f_rectime_01 = this.queryParam.f_rectime_01.format('YYYY-MM-DD') + ' 00:00:00'
      }
      return cpQueryParam
    },
    // 表格翻页
    tableChange (upagination, filters, sorter, { currentDataSource }) {
      this.row_idx = upagination.current * upagination.pageSize - upagination.pageSize
      this.queryParam.pageNumber = upagination.current
      this.queryParam.pageSize = upagination.pageSize
      this.queryList()
    }
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue'),
    WorkDeptSelect: () => import('@/views/correction/work/WorkDeptSelect.vue'),
    WorkToDoEdit: () => import('@/views/correction/work/WorkToDoEdit.vue'),
    AcceptHandleHeadComponent
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

.formArea {
  margin-bottom: 30px;
}

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 10px 10px 0;
  display: flex;
  justify-content: end;
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}
</style>
